<template>
  <div class="skeleton-loader" :class="{ 'animate': animate }">
    <!-- 卡片骨架屏 -->
    <div v-if="type === 'card'" class="skeleton-card">
      <div v-if="showImage" class="skeleton-image"></div>
      <div class="skeleton-content">
        <div v-if="showTitle" class="skeleton-title" :style="{ width: titleWidth }"></div>
        <div v-for="i in lines" :key="i" class="skeleton-line" :style="{ width: getLineWidth(i) }"></div>
        <div v-if="showActions" class="skeleton-actions">
          <div class="skeleton-button"></div>
          <div class="skeleton-button"></div>
        </div>
      </div>
    </div>

    <!-- 列表骨架屏 -->
    <div v-else-if="type === 'list'" class="skeleton-list">
      <div v-for="i in count" :key="i" class="skeleton-list-item">
        <div v-if="showAvatar" class="skeleton-avatar"></div>
        <div class="skeleton-list-content">
          <div class="skeleton-title" :style="{ width: '60%' }"></div>
          <div class="skeleton-line" :style="{ width: '80%' }"></div>
          <div class="skeleton-line" :style="{ width: '40%' }"></div>
        </div>
      </div>
    </div>

    <!-- 文章骨架屏 -->
    <div v-else-if="type === 'article'" class="skeleton-article">
      <div class="skeleton-article-header">
        <div class="skeleton-title" :style="{ width: '70%' }"></div>
        <div class="skeleton-subtitle" :style="{ width: '50%' }"></div>
        <div class="skeleton-meta">
          <div class="skeleton-tag"></div>
          <div class="skeleton-tag"></div>
          <div class="skeleton-date"></div>
        </div>
      </div>
      <div v-if="showImage" class="skeleton-article-image"></div>
      <div class="skeleton-article-content">
        <div v-for="i in 8" :key="i" class="skeleton-paragraph" :style="{ width: getParagraphWidth(i) }"></div>
      </div>
    </div>

    <!-- 网格骨架屏 -->
    <div v-else-if="type === 'grid'" class="skeleton-grid" :style="{ gridTemplateColumns: `repeat(${columns}, 1fr)` }">
      <div v-for="i in count" :key="i" class="skeleton-grid-item">
        <div class="skeleton-image"></div>
        <div class="skeleton-title"></div>
        <div class="skeleton-line" :style="{ width: '80%' }"></div>
      </div>
    </div>

    <!-- 表格骨架屏 -->
    <div v-else-if="type === 'table'" class="skeleton-table">
      <div class="skeleton-table-header">
        <div v-for="i in columns" :key="i" class="skeleton-table-cell"></div>
      </div>
      <div v-for="i in count" :key="i" class="skeleton-table-row">
        <div v-for="j in columns" :key="j" class="skeleton-table-cell"></div>
      </div>
    </div>

    <!-- 自定义骨架屏 -->
    <div v-else-if="type === 'custom'" class="skeleton-custom">
      <slot></slot>
    </div>

    <!-- 基础骨架屏 -->
    <div v-else class="skeleton-basic">
      <div v-for="i in lines" :key="i" class="skeleton-line" :style="{ width: getLineWidth(i) }"></div>
    </div>
  </div>
</template>

<script setup name="SkeletonLoader">
defineProps({
  // 骨架屏类型
  type: {
    type: String,
    default: 'basic',
    validator: (value) => ['basic', 'card', 'list', 'article', 'grid', 'table', 'custom'].includes(value)
  },
  // 是否显示动画
  animate: {
    type: Boolean,
    default: true
  },
  // 行数
  lines: {
    type: Number,
    default: 3
  },
  // 项目数量
  count: {
    type: Number,
    default: 5
  },
  // 网格列数
  columns: {
    type: Number,
    default: 3
  },
  // 是否显示图片
  showImage: {
    type: Boolean,
    default: true
  },
  // 是否显示标题
  showTitle: {
    type: Boolean,
    default: true
  },
  // 是否显示头像
  showAvatar: {
    type: Boolean,
    default: true
  },
  // 是否显示操作按钮
  showActions: {
    type: Boolean,
    default: false
  },
  // 标题宽度
  titleWidth: {
    type: String,
    default: '60%'
  }
})

// 获取行宽度
const getLineWidth = (index) => {
  const widths = ['90%', '70%', '50%', '80%', '60%']
  return widths[(index - 1) % widths.length]
}

// 获取段落宽度
const getParagraphWidth = (index) => {
  const widths = ['100%', '95%', '85%', '92%', '88%', '100%', '75%', '90%']
  return widths[(index - 1) % widths.length]
}
</script>

<style scoped>
/* 基础样式 */
.skeleton-loader {
  width: 100%;
}

.skeleton-loader.animate .skeleton-line,
.skeleton-loader.animate .skeleton-title,
.skeleton-loader.animate .skeleton-subtitle,
.skeleton-loader.animate .skeleton-image,
.skeleton-loader.animate .skeleton-avatar,
.skeleton-loader.animate .skeleton-button,
.skeleton-loader.animate .skeleton-tag,
.skeleton-loader.animate .skeleton-date,
.skeleton-loader.animate .skeleton-paragraph,
.skeleton-loader.animate .skeleton-table-cell {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 通用骨架元素 */
.skeleton-line,
.skeleton-title,
.skeleton-subtitle,
.skeleton-paragraph {
  height: 16px;
  background: #f0f0f0;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-title {
  height: 20px;
  margin-bottom: 12px;
}

.skeleton-subtitle {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-paragraph {
  height: 14px;
  margin-bottom: 6px;
}

.skeleton-image {
  width: 100%;
  height: 200px;
  background: #f0f0f0;
  border-radius: 8px;
  margin-bottom: 16px;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  background: #f0f0f0;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-button {
  width: 80px;
  height: 32px;
  background: #f0f0f0;
  border-radius: 6px;
}

.skeleton-tag {
  width: 60px;
  height: 24px;
  background: #f0f0f0;
  border-radius: 12px;
  margin-right: 8px;
}

.skeleton-date {
  width: 100px;
  height: 16px;
  background: #f0f0f0;
  border-radius: 4px;
}

/* 卡片骨架屏 */
.skeleton-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.skeleton-content {
  margin-top: 16px;
}

.skeleton-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

/* 列表骨架屏 */
.skeleton-list {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e9ecef;
}

.skeleton-list-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.skeleton-list-item:last-child {
  border-bottom: none;
}

.skeleton-list-content {
  flex: 1;
}

/* 文章骨架屏 */
.skeleton-article {
  background: white;
  border-radius: 12px;
  padding: 30px;
  border: 1px solid #e9ecef;
}

.skeleton-article-header {
  margin-bottom: 24px;
}

.skeleton-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.skeleton-article-image {
  width: 100%;
  height: 300px;
  background: #f0f0f0;
  border-radius: 8px;
  margin-bottom: 24px;
}

.skeleton-article-content {
  margin-top: 24px;
}

/* 网格骨架屏 */
.skeleton-grid {
  display: grid;
  gap: 20px;
}

.skeleton-grid-item {
  background: white;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e9ecef;
}

.skeleton-grid-item .skeleton-image {
  height: 150px;
  margin-bottom: 12px;
}

/* 表格骨架屏 */
.skeleton-table {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e9ecef;
}

.skeleton-table-header,
.skeleton-table-row {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: 16px;
  padding: 16px 20px;
}

.skeleton-table-header {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.skeleton-table-row {
  border-bottom: 1px solid #f0f0f0;
}

.skeleton-table-row:last-child {
  border-bottom: none;
}

.skeleton-table-cell {
  height: 16px;
  background: #f0f0f0;
  border-radius: 4px;
}

.skeleton-table-header .skeleton-table-cell {
  height: 18px;
  background: #e9ecef;
}

/* 基础骨架屏 */
.skeleton-basic {
  padding: 20px;
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .skeleton-line,
  .skeleton-title,
  .skeleton-subtitle,
  .skeleton-paragraph,
  .skeleton-image,
  .skeleton-avatar,
  .skeleton-button,
  .skeleton-tag,
  .skeleton-date,
  .skeleton-table-cell {
    background: #3a3a3c;
  }

  .skeleton-loader.animate .skeleton-line,
  .skeleton-loader.animate .skeleton-title,
  .skeleton-loader.animate .skeleton-subtitle,
  .skeleton-loader.animate .skeleton-image,
  .skeleton-loader.animate .skeleton-avatar,
  .skeleton-loader.animate .skeleton-button,
  .skeleton-loader.animate .skeleton-tag,
  .skeleton-loader.animate .skeleton-date,
  .skeleton-loader.animate .skeleton-paragraph,
  .skeleton-loader.animate .skeleton-table-cell {
    background: linear-gradient(90deg, #3a3a3c 25%, #2c2c2e 50%, #3a3a3c 75%);
    background-size: 200% 100%;
  }

  .skeleton-card,
  .skeleton-list,
  .skeleton-article,
  .skeleton-grid-item,
  .skeleton-table {
    background: #1c1c1e;
    border-color: #3a3a3c;
  }

  .skeleton-table-header {
    background: #2c2c2e;
    border-color: #3a3a3c;
  }

  .skeleton-list-item,
  .skeleton-table-row {
    border-color: #3a3a3c;
  }

  .skeleton-actions {
    border-color: #3a3a3c;
  }

  .skeleton-table-header .skeleton-table-cell {
    background: #48484a;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .skeleton-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .skeleton-article,
  .skeleton-card {
    padding: 20px;
  }

  .skeleton-list-item {
    padding: 12px 16px;
  }

  .skeleton-table-header,
  .skeleton-table-row {
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .skeleton-grid {
    grid-template-columns: 1fr;
  }

  .skeleton-article,
  .skeleton-card {
    padding: 16px;
  }

  .skeleton-list-item {
    gap: 12px;
  }

  .skeleton-avatar {
    width: 32px;
    height: 32px;
  }

  .skeleton-actions {
    flex-direction: column;
    gap: 8px;
  }

  .skeleton-meta {
    flex-wrap: wrap;
    gap: 8px;
  }
}
</style>